<template>
  <el-dialog title="告警详情" v-model="dialogVisible" width="800px" append-to-body>
    <el-form :model="data" label-width="70px" label-position="left">
      <el-row class="c333 bold fs-16 mb10">基本信息</el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电站名称">
            {{ data.stationName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称">
            <span>{{ data.controllerName }}</span>
            <span v-if="data.logicAddress">{{ '-'+data.logicAddress }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="告警类型">
            <el-tag :type="data.ruleType==1?'warning':'danger'"effect="light">{{ data.ruleType==1?'预警':'告警' }}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="告警时间">
            {{ data.createTime }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="告警来源">系统提示</el-form-item>
        </el-col>
      </el-row>
      <el-row class="c333 bold fs-16 mb10">告警原因</el-row>
      <el-row>
        <el-col :span="24">
          {{ data.ruleContent }}
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  data:{
    type: Object,
    default: () => ({}),
  }
})
const dialogVisible = ref(false)

const open = () => {
  dialogVisible.value = true
}
const close = () => {
  dialogVisible.value = false
}
// 对外暴露初始化方法
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped></style>
